<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<style type="text/css">
	.main{
		width: 100%;
		height: 100%;
	}
	.leftUser,.rightUser{
		float: left;
	    width: 39%;
	    height: 100%;
	    padding: 0px 15px;
	}
	.center{
		float: left;
		width:100px;
	    height: 100%;
		margin-top:70px;
		margin-left: 10px;
		margin-right: 10px;
	    padding: 0px;
	}
	.leftUser .top{
		height: 10%;
		width: 100%;
	}
	.rightUser .top{
		height: 30px;;
		width: 100%;
		padding-top: 10px;
	}
	.treePanel,.usersPanel{
		height: 90%;
		width: 100%;
		margin-top: 4px;
	}
	.main .select-panel{
		width: 100%;
		height: 200px;
	}
	#succ_dialog {
		z-index:1051;
	}
</style>
<div class="modal-body">
	<div class="row">
		<div class="main">

			<!-- 左侧面板 -->
			<div class="leftUser">
				<div class="top">
					<form id="searchUser" class="form-search" method="post">
						<div class="input-group">
							<input type="text" name="userRealName" value="${userRealName }"
								class="form-control input-sm pull-right" placeholder="输入姓名">
							<div class="input-group-btn">
								<button type="button" class="btn btn-sm btn-default" id="btn-search-user">
									<i class="fa fa-search"></i>
								</button>
							</div>
						</div>
					</form>
				</div>
				<div class="treePanel">
					<select class="form-control select-panel" id="selectUser" multiple="multiple">
						<c:forEach items="${users }" var="user">
							<option value="${user.userId }">${user.realName }</option>
						</c:forEach>
					</select>
				</div>
			</div>

			<!-- 中间面板 -->
			<div class="center">
				<button class="btn btn-sm btn-primary" id="btn-add-user"
					style="width: inherit;height: 25px;padding-top: 0.5px;margin-bottom: 10px;">
					<i class="fa fa-arrow-right"></i>
				</button>
				<button class="btn btn-sm btn-primary" id="btn-del-user"
					style="width: inherit;height: 25px;padding-top: 0.5px;margin-bottom: 10px;">
					<i class="fa fa-arrow-left"></i>
				</button>
				<button class="btn btn-sm btn-primary" id="btn-delAll-user"
					style="width: inherit;height: 25px;padding-top: 0.5px;margin-bottom: 10px;">
					删除全部
				</button>
			</div>

			<!-- 右侧面板 -->
			<div class="rightUser">
				<div class="top">
					<span>已选人员列表</span>
				</div>
				<div class="usersPanel">
					<form id="selectUsers">
						<input type="hidden" name="id" value="${id}" />
						<select class="form-control select-panel" id="users" name="userIds" multiple="multiple">
							<c:forEach items="${selectedUsers }" var="user">
								<option value="${user.userId }">
									${user.realName }
								</option>
							</c:forEach>
						</select>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal-footer">
	<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	<button type="button" id="sub_but" class="btn btn-primary">确定</button>
</div>

<script type="text/javascript">

	$( function() {

			var opts = $("#users").find("option");
			if(opts.length > 0){
				for(var i = 0; i < opts.length; i++){
					$("#searchUser").append("<input type='hidden' name='userIds' value='"+opts[i].value+"'/>");
				}
			}

			$("#btn-search-user").click(function() {
				$(document).jProgressbar.show();
				var options = {
					url : ctxPath + '/user/role!findUsers.action',
					type : 'post',
					data : $("#searchUser").serialize(),
					success : function(users) {
					    users = util.strToObj(users);
					    var str = '';
						$("#selectUser").find("option").remove();
					   	for(var i = 0;i < users.length; i++){
					   		str += '<option value="'+users[i].userId+'">'+users[i].realName+'</option>';
					   	}
					   	$("#selectUser").append(str);
						$(document).jProgressbar.hide();
					}
				};
				$.ajax(options);
			});

			$("#btn-add-user").click(function() {
				var left = $("#selectUser");
				var lopts = left.find("option");
				if(lopts.length == 0){
					dialog.alert('无可添加人员!');
				}else if(left[0].selectedIndex == -1){
					dialog.alert("至少选中一个!");
				}
				var larr =[];
				for(var i = 0; i < lopts.length; i++){
					if(lopts[i].selected){
						larr.push(lopts[i]);
					}
				}
				var right = $("#users");
				for(var i = 0; i< larr.length; i++){
					right[0].add(larr[i]);
					$("#searchUser").append("<input type='hidden' name='userIds' value='"+larr[i].value+"'/>");
				}
			});

			$("#btn-del-user").click(function() {
				var right = $("#users");
				var ropts = right.find("option");
				if(ropts.length == 0){
					dialog.alert('无可删除人员!');
				}else if(right[0].selectedIndex == -1){
					dialog.alert('至少选中一个!');
				}
				var rarr =[];
				for(var i = 0; i < ropts.length; i++){
					if(ropts[i].selected){
						rarr.push(ropts[i]);
					}
				}
				var left = $("#selectUser");
				for(var i = 0; i < rarr.length; i++){
					left[0].add(rarr[i]);
					var inputs = $("#searchUser").find("input");
					for(var j = 0; j < inputs.length; j++){
						if(inputs[j].value == rarr[i].value){
							$(inputs[j]).remove();
						}
					}
				}
			});

			$("#btn-delAll-user").click(function() {
				var right = $("#users");
				var ropts = right.find("option");
				if(ropts.length == 0){
					dialog.alert('无可删除人员!');
				}else{
					var left = $("#selectUser");
					for(var i =0 ; i < ropts.length; i++){
						left[0].add(ropts[i]);
						var inputs = $("#searchUser").find("input");
						for(var j = 0; j < inputs.length; j++){
							if(inputs[j].value == ropts[i].value){
								$(inputs[j]).remove();
							}
						}
					}
				}
			});

			$("#sub_but").click(function() {
				$(document).jProgressbar.show();
				var opts = $('#users option');
				for(var i = 0; i < opts.length; i++){
					opts[i].selected = 'selected';
				}
				var options = {
					url : ctxPath + '/user/role!addUsers.action',
					type : 'post',
					data : $("#selectUsers").serialize(),
					success : function(msg) {
						msg = util.strToObj(msg);
						if (msg.code == "success"){
							$("#selectUsers").parents('.modal').modal('hide');
							dialog.calloutAlert(msg.desc,"","success");
						}else{
							$('#users option').removeAttr('selected');
							dialog.alert(msg.desc);
						}
						$(document).jProgressbar.hide();
					},
					error : function() {
						$(document).jProgressbar.hide();
						$("#selectUsers").parents('.modal').modal('hide');
						dialog.calloutAlert("提交异常！","","error");
					}
				};
				$.ajax(options);
			});

	});

</script>
